import React, { Component } from 'react';
import Taro,{ getCurrentInstance } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components'
import classnames from 'classnames'
import dayjs from 'dayjs'
import { getRedPacketLog } from '@/api/redpacket'
import EmptyView from '@/components/EmptyView'
const redpacketImg = 'https://static3.jekunauto.com/img/others/redpacket-img.png'
import './index.scss'


interface State{
  list: any,
  isLoaded: boolean
}

export default class Index extends Component<{}, State> {
	$instance = getCurrentInstance();
  constructor() {
    super(...arguments)
    this.state = {
      list: [],
      isLoaded: false
    }
  }
  UNSAFE_componentWillMount () {}
	componentDidMount() {
		let { redPacketType } = this.$instance.router.params
    getRedPacketLog({ query: { filter: { and: [{ redPacketType }] } } }).then(res => {
      const data = res.data['data'].map(v => {
        return {
          ...v,
          createdAt: dayjs.unix(v.createdAt).format('YYYY-MM-DD HH:mm:ss')
        }
      })
      this.setState({
        list: data,
        isLoaded: true
      })
    })
  }
  UNSAFE_componentWillReceiveProps (nextProps,nextContext) {}
  componentWillUnmount () {}
  componentDidShow () {}
  componentDidHide () {}
  componentDidCatchError () {}
  componentDidNotFound () {}
  render() {
    const {
      list,
      isLoaded
    } = this.state
    return isLoaded && (
        list.length ? (
          <View className='redpacket-wrap'>
            <View className='redpacket-container'>
              {
                list.map(v => {
                  return (
                    <View key={v.id} className='redpacket-list'>
                      <Image src={redpacketImg} className='redpacket-list-img'></Image>
                      <View className='redpacket-list-context'>
                        <View className='redpacket-list-context-title'>消费订单：{v.orderNumber}</View>
                        <View className='redpacket-list-context-status'>{v.orderNumber === 1 ? '已使用' : '已退回'}</View>
                        <View className='redpacket-list-context-date'>{v.createdAt}</View>
                      </View>
                      <View className={classnames('redpacket-price', v.orderNumber !== 1 && 'back')}>
                        {v.orderNumber === 1 ? '-' : '+'}￥<Text className='text'>{v.value}</Text>
                      </View>
                    </View>
                  )
                })
              }
            </View>
          </View>
        ) : (<EmptyView title='空空如也~' />)
    )
  }
}
